<template>
	<view>
		<view class="box" :style="{backgroundColor:(targgetId==2?'#ffffff':'')}">
			<!-- 成本 -->
			<block v-if="targgetId==2">
				<view class="cost-declare">
					<view class="invoice">
						<view class="invoice-title">
							请选择发票类型
						</view>
						<view class="invoice-choice">
							<view :class="['invoice-have',invoice_sty==0?'active':'']" @tap="choice_invoice(0)">
								有发票
							</view>
							<view :class="['invoice-no',invoice_sty==1?'active':'']" @tap="choice_invoice(1)">
								无发票
							</view>
						</view>
					</view>
					<view class="cost-explain">
						<view class="cost-explain-title">
							成本说明
						</view>
						<view class="cost-explain-con">
							<textarea value="" style="font-size: 24rpx;color: #B6BDBD;padding: 24rpx;"
								v-model="programme" maxlength="30" placeholder="请填写成本说明..." />
							<view class="lengthNum">
								{{programme.length}}/30
							</view>
						</view>
					</view>

					<view class="cost-price">
						<view class="cost-price-num">
							<view class="cost-price-left">
								报销金额
							</view>
							<input type="text" placeholder="请填写报销金额" value="" v-model="cost_money" />
						</view>
						<view class="cost-price-class">
							<view class="cost-price-left">
								报销类目
							</view>
							<!-- <input type="text" @tap="choiceCostType" disabled="true" placeholder="请选择" value=""
								v-model="choice_costtype.name" /> -->
								
								<fy-picker v-model="dataValue" :range="list_new_cost" @confirm="onconfirm">
									<view class="form-item-content">{{ dataValue !== 0 && !dataValue ? '请选择' : list_new_cost[dataValue] }}</view>
								</fy-picker>
						</view>
					</view>
					
					<view class="programme-img">
						<view class="programme-img-title" style="margin-bottom: 30rpx;">
							上传图片
						</view>
						<view class="upimg">
							<view class="upimg-btn" v-for="(item,index) in images_list" :key="index">
								<view class="upimg-btn-wen">
									图片
								</view>
								<image @tap="previewImage(index,1)" :src="item" mode="" style="width: 100%;height: 100%;">
								</image>
								<view class="del_img" @tap="delImg(index,1)">
									<image src="../../static/del.png" mode=""></image>
								</view>
							</view>
							<view class="upimg-btn" @tap="chooseImage">
								<image class="upimg-btn-bgImg" style="z-index: 9999;top: 20rpx;"
									src="../../static/detail/upimgBtnImg.png" mode=""></image>
								<view class="upimg-btn-tishi">
									点击上传图片
								</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</block>
			<!-- 报价 -->
			<block v-else-if="targgetId==3">
				<view class="add-offer" @tap="addOfferNew">
					添加
				</view>
				<view class="offer">
					<view class="offer-card" v-for="(item,index) in offerList" :key='index'>
						<view @tap='del_offer(item.id)' class="offer_del" v-if="item.id!=1">
							删除
						</view>
						<view class="offer-ful">
							<text>名称</text>
							<input type="text" placeholder-style="color: #B6BDBD;font-size: 28rpx;"
								placeholder="请填写配件名称" v-model="item.name" />
						</view>
						<view class="offer-ful">
							<text>报价</text>
							<input type="number" @input="settlement(item.id)"
								placeholder-style="color: #B6BDBD;font-size: 28rpx;" placeholder="请填写报价"
								v-model="item.money" />
						</view>
						<view class="offer-ful">
							<text>数量</text>
							<input type="number" @input="settlement(item.id)"
								placeholder-style="color: #B6BDBD;font-size: 28rpx;" placeholder="请填写数量"
								v-model="item.number" />
						</view>
						<!-- <view class="offer-price">
							<image src="../../static/detail/price.png" mode=""></image>
							<text>金额总计：{{item.allPrice||''}}元</text>
						</view> -->
					</view>
				</view>
			</block>
			<!-- 方案 -->
			<block v-else-if="targgetId==4">
				<view class="programme-box">
					<textarea maxlength="200" v-model="result" placeholder-style="font-size: 28rpx;color: #646466;"
						placeholder="添加新方案..." />
					<view class="count">
						{{result.length}}/200
					</view>
				</view>
				<view class="programme-img">
					<view class="programme-img-title">
						上传图片/视频
					</view>
					<view class="programme-img-desp">
						请确保图片，视频清楚可见
					</view>
					<view class="upimg">
						<!-- <block>
							<view class="upimg-btn">
								<view class="upimg-btn-wen">
									图片
								</view>
							</view>
						</block> -->
						<view class="upimg-btn" v-for="(item,index) in imgs_list" :key="index">
							<view class="upimg-btn-wen">
								图片
							</view>
							<image @tap="previewImage(index)" :src="item" mode="" style="width: 100%;height: 100%;">
							</image>
							<view class="del_img" @tap="delImg(index)">
								<image src="../../static/del.png" mode=""></image>
							</view>
						</view>
						<view class="upimg-btn" v-if="video_list">
							<view class="upimg-btn-wen">
								视频
							</view>
							<video :src="video_list" style="width: 100%;height: 100%;
					border-radius: 10rpx;
					overflow: hidden;"></video>
							<view class="del_img" @tap="delVideo">
								<image src="../../static/del.png" mode=""></image>
							</view>
						</view>
						<view class="upimg-btn" @tap="chooseVideoImage">
							<image class="upimg-btn-bgImg" style="z-index: 9999;top: 20rpx;"
								src="../../static/detail/upimgBtnImg.png" mode=""></image>
							<view class="upimg-btn-tishi">
								点击上传图片/视频
							</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 维修方案   勘察记录 -->
			<block v-else>
				<view class="programme-box">
					<textarea maxlength="200" v-model="result" placeholder-style="font-size: 28rpx;color: #646466;"
						:placeholder="targgetId==1?'请简要填写勘察记录...':(targgetId==5?'请简要描述维修方案...':'请简要描述保养方案...')" />
					<view class="count">
						{{result.length}}/200
					</view>
				</view>
				<view class="programme-img">
					<view class="programme-img-title">
						上传图片/视频
					</view>
					<view class="programme-img-desp">
						请确保图片，视频清楚可见
					</view>
					<view class="upimg">
						<!-- <block>
							<view class="upimg-btn">
								<view class="upimg-btn-wen">
									图片
								</view>
							</view>
						</block> -->
						<view class="upimg-btn" v-for="(item,index) in imgs_list" :key="index">
							<view class="upimg-btn-wen">
								图片
							</view>
							<image @tap="previewImage(index)" :src="item" mode="" style="width: 100%;height: 100%;">
							</image>
							<view class="del_img" @tap="delImg(index)">
								<image src="../../static/del.png" mode=""></image>
							</view>
						</view>
						<view class="upimg-btn" v-if="video_list">
							<view class="upimg-btn-wen">
								视频
							</view>
							<video :src="video_list" style="width: 100%;height: 100%;
					border-radius: 10rpx;
					overflow: hidden;"></video>
							<view class="del_img" @tap="delVideo">
								<image src="../../static/del.png" mode=""></image>
							</view>
						</view>
						<view class="upimg-btn" @tap="chooseVideoImage">
							<image class="upimg-btn-bgImg" style="z-index: 9999;top: 20rpx;"
								src="../../static/detail/upimgBtnImg.png" mode=""></image>
							<view class="upimg-btn-tishi">
								点击上传图片/视频
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<button-btm :targgetId='targgetId'>
			提交
		</button-btm>
	</view>
</template>




<script>
	import config from '@/request/config.js'
	import FyPicker from '@/components/fy-picker/fy-picker.vue'
	import buttonBtm from '@/components/button-btm.vue'
	export default {
		components: {
			buttonBtm,FyPicker
		},
		data() {
			return {
				dataValue:"",
				list_new_cost:[],//类目
				invoice_sty: null, //添加成本申报  选择发票类型
				cost_money: '', //添加成本申报  报销金额
				choice_costtype: {}, //添加成本申报 选择的类目
				costType_list: [], //添加成本申报 成本申报类目
				images_list: [], // 添加成本申报 上传的图片数组
				imgs_list: [], //添加勘察记录   上传的图片数组
				video_list: '', //添加勘察记录   上传的视频
				service_id: null, //维修id
				warranty_id: null, //工单id
				targgetId: -1, //tabbar id
				result: '', //添加勘察记录-----------添加新方案   结果集内容
				offerList: [{ //添加申报方案   报价
					name: '',
					money: null,
					number: null,
					allPrice: 0,
					id: 1
				}],
				programme: '' //添加成本申报  成本说明
			}
		},
		computed: {

		},
		watch: {
			/* offerList: {
				handle(newVal) {
					console.log(newVal);
				},
				deep: true
			} */
		},
		onLoad(t) {
			this.targgetId = t.nav_id //tabbar id
			this.warranty_id = t.id //工单id
			this.service_id = t.service_id //工单id
			if (t.nav_id == 2) {
				/* 获取成本类目 */
				this.costType()
			}
		},
		methods: {
			onconfirm(e) {
			   let choice_costtype = this.costType_list.find(item2 => {
			   	return item2.name == e.text
			   })
			   this.choice_costtype = choice_costtype //选择的类目
			},
			/* 提交按钮 */
			btnJump(t) {
				switch (t) {
					case 2: //成本
						this.addCost()
						break;
					case 3: //报价
						this.addoffer()
						break;
					case 4: //添加新方案
						this.addProject()
						break;
					default:
					case 6:
						this.addSurvey()
						break;
				}
			},
			/* 添加新方案 */
			addProject() {
				let iamges = JSON.parse(JSON.stringify(this.imgs_list)) //深拷贝图片数组
				iamges.push(this.video_list) //添加视频
				let all_images = iamges.toString() //转化字符串
				this.$https.post('/warranty/addproject', {
					service_id: this.service_id, //维修单id
					warranty_id: this.warranty_id, //工单id
					project: this.result,
						images: all_images, 
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			/*添加成本申报   选择发票  0有 1没有*/
			choice_invoice(i) {
				this.invoice_sty = i
			},
			/*添加成本申报   选择成本类目*/
			choiceCostType() {
				let nex_costType = this.costType_list.map(item => {
					return item.name
				}) //通过后端数据  筛选字段
				uni.showActionSheet({
					title: '选择报销类目',
					itemList: nex_costType, //
					success: res => {
						let choice_costtype = this.costType_list.find(item2 => {
							return item2.name == nex_costType[res.tapIndex]
						})
						this.choice_costtype = choice_costtype //选择的类目
					}
				});
			},
			/*添加成本申报   获取成本类目 */
			costType() {
				this.$https.post('/warranty/costType', {
					warranty_id: this.warranty_id, //工单id
				}).then(res => {
					this.costType_list = res.data
					this.list_new_cost=this.costType_list.map(item => {
					return item.name
				}) 
				})
			},
			/*添加成本申报   成本申报 */
			addCost() {
				console.log(this.invoice_sty,1245);
				this.$https.post('/warranty/addcost', {
					service_id: this.service_id, //维修单id
					warranty_id: this.warranty_id, //工单id
					cost_category_id: this.choice_costtype.id, //类目id
					money: this.cost_money, //金额
					explain: this.programme, //说明
					billing_data: this.invoice_sty, //有无发票:0=有,1=无
					images: this.images_list.toString()
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			/*添加勘察记录   添加保养记录  添加维修记录 */
			addSurvey() {
				var url_ = ''; //接口地址
				var params = {}; //参数
				let iamges = JSON.parse(JSON.stringify(this.imgs_list)) //深拷贝图片数组   
				iamges.push(this.video_list) //添加视频
				let all_images = iamges.toString() //转化字符串
				switch (this.targgetId) {
					case '1': //勘察记录
						url_ = '/warranty/addsurvey'
						params = {
							service_id: this.service_id, //维修单id	
							images: all_images, //图片/视频
							result: this.result, //结果集	
							warranty_id: this.warranty_id, //工单id
						}
						break;
					case '5': //维修记录
						url_ = '/warranty/addrepair'
						params = {
							service_id: this.service_id, //维修单id	
							images: all_images, //图片/视频
							warranty_id: this.warranty_id, //工单id
							repair: this.result //记录内容
						}
						break;
					case '6': //保养记录
						url_ = '/warranty/addmaintain'
						params = {
							service_id: this.service_id, //维修单id	
							images: all_images, //图片/视频
							warranty_id: this.warranty_id, //工单id
							maintain: this.result //记录内容
						}
						break;

				}
				this.$https.post(url_, params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},

			/* 删除报价 */
			del_offer(id) {
				this.offerList = this.offerList.filter(item => {
					return item.id != id
				})
			},
			/*添加 报价   报价 */
			addoffer() {
				/* 每一项都存在 */
				if (this.isExistence(this.offerList)) {
					this.$https.post('/warranty/addoffer', {
						service_id: this.service_id, //维修id
						warranty_id: this.warranty_id, //工单id
						substance: this.offerList, //报价数组
					}).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					})
				} else {
					uni.showToast({
						title: '请填写完整信息',
						duration: 1500,
						icon: 'error'
					})
				}


			},
			/* 添加报价  判断每一项是否都存在 */
			isExistence(json) {
				let flag = true
				for (let i = 0; i < json.length; i++) {
					let item = json[i];
					for (let key in item) {
						if (!item[key]) {
							flag = false
						}
					}
				}
				return flag
			},
			/*添加报价  金额总计 */
			settlement(id) {
				this.offerList.forEach(item => {
					if (item.id == id) {
						item.allPrice = item.number * item.money
					}
				})

			},

			/*添加申报方案  新增类目  新增报价 */
			addOfferNew() {
				this.offerList = [...this.offerList, {
					name: '',
					money: null,
					number: null,
					allPrice: null,
					id: this.offerList.length + 1
				}]
			},
			/*添加勘察记录  图片预览 */
			previewImage: function(index,type) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: type == 1 ? this.images_list : this.imgs_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			/*添加勘察记录  删除照片 */
			delImg(i,type) {
				type == 1 ? this.images_list.splice(i,1) : this.imgs_list.splice(i, 1)
			},
			/*添加勘察记录 图片上传 */
			upImg(type) {
				const token = uni.getStorageSync('userInfo').token
				let _this = this;
				wx.chooseImage({
					sourceType: ["album", "camera"],
					count: 8,
					success: (res) => {
						const img_length = res.tempFiles.length + this.imgs_list.length
						if (img_length > 7) {
							uni.showToast({
								title: '最多上传7张图片',
								duration: 1500,
								icon: 'none'
							})
						} else {
							res.tempFilePaths.forEach(item => {
								uni.uploadFile({
									url: config.baseUrl + '/common/upload',
									filePath: item,
									name: 'file',
									formData: {
										token: token // 上传附带参数
									},
									success: (res1) => {
										let img_data=JSON.parse(res1.data)
										if(img_data.code==0){
											uni.showToast({
												title: img_data.msg,
												duration: 1500,
												icon: 'error'
											})
										}else{
											var img = img_data.data.fullurl
										}
										

										type == 1 ? this.images_list.push(img) : this.imgs_list.push(img)
									},
									fail: res3 => {
										uni.showToast({
											title: '上传失败',
											duration: 1500,
											icon: 'error'
										})
									}
								});
							})



							//此处会返回图片暂存路径和文件大小
							/* let imgs = res.tempFiles.map(item => {
								return item.path
							})
							this.imgs_list = [...imgs, ...this.imgs_list] */
						}

					},
					fail: res => {
						uni.showToast({
							title: '图片上传失败，请重试！',
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			// 添加成本 上传图片
			chooseImage(){
				this.upImg(1);
			},
			
			
			
			//添加勘察记录 上传视频
			chooseVideo(index) {
				if (this.video_list) {
					uni.showToast({
						title: '最多上传1个视频',
						duration: 1500,
						icon: 'none'
					})
				} else {
					const token = uni.getStorageSync('userInfo').token
					uni.chooseVideo({
						sourceType: ['album', 'camera'],
						camera: 'back',
						size: 1,
						success: res => {
							uni.uploadFile({
								url: config.baseUrl + '/common/upload',
								filePath: res.tempFilePath,
								name: 'file',
								formData: {
									token: token // 上传附带参数
								},
								success: (res1) => {
									this.video_list = JSON.parse(res1.data).data.fullurl
								},
								fail: res3 => {
									uni.showToast({
										title: '上传失败',
										duration: 1500,
										icon: 'error'
									})
								}
							});


							/* this.video_list = res.tempFilePath */
						}
					})
				}
			},
			/* 添加勘察记录 删除视频 */
			delVideo() {
				this.video_list = ''
			},
			/*添加勘察记录 图片  视频上传 */
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						if (res.tapIndex == 0) {
							this.upImg();
						} else {
							this.chooseVideo();
						}
					},
					fail: res => {
						uni.showToast({
							title: '视频上传失败，请重试！',
							icon: 'none',
							duration: 1500
						})
					}
				});
			},
		}
	}
</script>



<style lang="scss" scoped>
	.form-item-content{
		    font-size: 28rpx;
		    font-weight: 400;
			width: 300rpx;
	}
	.box {
		padding-bottom: 200rpx;
		background-color: #f6f7fb;
		min-height: 100vh;
	}

	.add-offer {
		position: fixed;
		bottom: 442rpx;
		right: 32rpx;
		width: 88rpx;
		height: 88rpx;
		background: rgba(26, 102, 255, 0.15);
		border-radius: 50%;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #257EFA;
		line-height: 88rpx;
		text-align: center;
		z-index: 999999999;
	}

	.offer {
		padding: 32rpx 32rpx 0;
		background-color: #f6f7fb;

		.offer-card {
			position: relative;

			background-color: #FFFFFF;
			padding: 0 18rpx 22rpx;
			box-shadow: 0px 8rpx 8rpx 2rpx rgba(0, 0, 0, 0.02);
			border-radius: 8rpx;
			margin-top: 20rpx;

			.offer_del {

				position: absolute;
				right: 5rpx;
				top: -10rpx;
				font-size: 24rpx;
				border-radius: 4rpx;
				color: #B6BDBD;
				background-color: #FFFFFF;
				padding: 10rpx 20rpx;
				box-shadow: 10rpx 10rpx 10rpx;
				z-index: 99999;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.offer-ful {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 14rpx;
				border-bottom: 2rpx solid #f6f7fb;

				text {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
				}
			}

			.offer-price {
				background: #F6F6FB;
				border-radius: 4rpx;
				background-color: #f6f7fb;
				padding: 20rpx 12rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF3507;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 20rpx;
				}
			}
		}
	}

	.programme-img {
		padding: 46rpx 32rpx;
		background-color: #FFFFFF;

		.upimg {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			text-decoration: none;

			.del_img {
				position: absolute;
				top: -16rpx;
				right: -16rpx;
				width: 32rpx;
				height: 32rpx;
				z-index: 999;
				background-color: #FFFFFF;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.upimg-btn {
				/* width: 30%;
				height: 200rpx; */
				width: 128rpx;
				height: 128rpx;
				background-color: #f6f7fb;
				margin-right: 58rpx;
				position: relative;
				margin-bottom: 20rpx;

				image {
					z-index: -99;
					border-radius: 10rpx;
					overflow: hidden;
				}

			}

			.upimg-btn:nth-child(4n) {
				margin-right: 0rpx;
			}
		}

		.upimg::after {
			// 使用伪类元素占据单位，不影响页面
			content: "";
			height: 0;
			width: 128rpx;
		}


		.programme-img-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #303030;
		}

		.programme-img-desp {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			margin: 12rpx 0 24rpx;
		}
	}

	.programme-box {
		padding: 46rpx 32rpx;
		border-bottom: 20rpx solid #f6f7fb;
		height: 200rpx;
		background-color: #FFFFFF;
		position: relative;

		.count {
			position: absolute;
			right: 32rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #646466;
		}

		textarea {
			height: 100%;
			width: 100%;
		}
	}

	.cost-declare {
		.invoice {
			padding: 28rpx 32rpx 34rpx;
			background-color: #FFFFFF;
			border-bottom: 20rpx solid #f7f8fb;

			.invoice-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #303030;
				line-height: 33rpx;
				margin-bottom: 32rpx;
			}

			.invoice-choice {
				display: grid;
				grid: 72rpx / auto auto;
				grid-gap: 30rpx;

				.invoice-have {
					background: #F6F6FB;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #303030;
					line-height: 72rpx;
					text-align: center;
				}

				.invoice-no {
					background: #F6F6FB;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #303030;
					line-height: 72rpx;
					text-align: center;
				}
			}
		}

		.cost-explain {
			padding: 28rpx 32rpx;

			.cost-explain-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #303030;
				margin-bottom: 32rpx;
			}

			.cost-explain-con {
				background-color: #f6f7fb;
				height: 176rpx;
				border-radius: 8rpx;
				position: relative;

				.lengthNum {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #B6BDBD;
					position: absolute;
					bottom: 28rpx;
					right: 24rpx;
				}

				textarea {
					height: 100%;
					box-sizing: border-box;
				}
			}
		}

		.cost-price {
			.cost-price-num {
				padding: 28rpx 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f6f7fb;

			}

			.cost-price-class {
				padding: 28rpx 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 2rpx solid #f6f7fb;
			}
		}

		.cost-price-left {
			font-size: 28rpx;
			font-weight: 500;
			color: #303030;
		}

		input {
			font-size: 28rpx;
			font-weight: 400;
			color: #B6BDBD;
		}
	}

	.upimg-btn-wen {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 56rpx;
		height: 28rpx;
		line-height: 28rpx;
		background: #FF6619;
		border-radius: 4rpx 0rpx 8rpx 0rpx;
		z-index: 999999;
	}

	/* .upimg-btn:last-child {} */

	.upimg-btn-bgImg {
		position: absolute;
		top: 44rpx;
		left: 50%;
		width: 38rpx;
		height: 38rpx;
		margin-left: -19rpx;
	}

	.upimg-btn-tishi {
		position: absolute;
		font-size: 16rpx;
		font-weight: 400;
		color: #969699;
		width: 96rpx;
		left: 50%;
		margin-left: -48rpx;
		text-align: center;
		bottom: 24rpx;
	}

	.active {
		background-color: #EFF2FF !important;
		color: $public-oclor !important;

		border: 2rpx solid $public-oclor;
	}
</style>
